<template>
  <a-layout>
    <a-layout-sider
      breakpoint="lg"
      collapsed-width="0"
      @collapse="onCollapse"
      @breakpoint="onBreakpoint"
    >
      <div id="logo" data-text="J.X.Y 技术BLOG">Monkey技术</div>
      <a-menu theme="dark" mode="inline">
        <a-menu-item key="1">
          <user-outlined />
          <router-link class="nav-text" to="/home"> Homepage</router-link>
        </a-menu-item>
        <a-menu-item key="2">
          <video-camera-outlined />
          <router-link class="nav-text" to="/about"> About</router-link>
        </a-menu-item>
        <a-menu-item key="3">
          <file-add-outlined />
          <router-link class="nav-text" to="/articleEditor">
            Article Editor
          </router-link>
        </a-menu-item>
        <a-menu-item key="4">
          <file-add-outlined />
          <router-link class="nav-text" to="/ces">
            3D
          </router-link>
        </a-menu-item>
      </a-menu>
    </a-layout-sider>
    <a-layout>
      <a-layout-header
        :style="{ background: '#777', padding: 0, height: '760px' }"
      >
        <carousel-cpt />
      </a-layout-header>

      <a-layout-content :style="{ margin: '24px 16px 0' }">
        <div
          :style="{ padding: '24px', background: '#fff', minHeight: '660px' }"
        >
          <router-view />
        </div>
      </a-layout-content>
      <a-layout-footer style="text-align: center">
        Homepage ©2022 Created by BBM
      </a-layout-footer>
      <div id="modal">
        <div>Big Big Monkey 技术团队 [BBM]</div>
        <div>{{ soul }}</div>
        <router-link to="/login" class="login">登录</router-link>
        <router-link to="/about" class="login">联系</router-link>
      </div>
    </a-layout>
  </a-layout>
</template>
<script lang="ts">
import {
  UserOutlined,
  VideoCameraOutlined,
  UploadOutlined,
} from "@ant-design/icons-vue";
import { defineComponent, ref, reactive } from "vue";
import CarouselCpt from "./components/CarouselCpt.vue";
import { FileAddOutlined } from "@ant-design/icons-vue";

const colorList = ["#f56a00", "#7265e6", "#ffbf00", "#00a2ae"];
export default defineComponent({
  components: {
    UserOutlined,
    VideoCameraOutlined,
    UploadOutlined,
    CarouselCpt,
    FileAddOutlined,
  },
  setup() {
    const onCollapse = (collapsed: boolean, type: string) => {};
    const color = ref(colorList[0]);
    const onBreakpoint = (broken: boolean) => {};
    const soul =
      " 一个人如能让自己经常维持像孩子一般纯洁的心灵，用乐观的心情做事，用善良的心肠待人，光明坦白，他的人生一定比别人快乐得多";

    return {
      selectedKeys: ref<string[]>(["4"]),
      onCollapse,
      onBreakpoint,
      color,
      soul,
    };
  },
});
</script>
<style scoped>
#logo {
  display: inline-block;
  font-size: 24px;
  font-weight: 600;
  margin: 0 15px;
  color: white;
  position: relative;
}
#modal {
  position: absolute;
  width: 1000px;
  height: 600px;
  top: 100px;
  left: 200px;
  /* background: rgba(255, 255, 255, 0.2); */
  cursor: pointer;
  z-index: 10;
}
#modal div:first-child {
  height: 200px;
  line-height: 200px;
  font-size: 48px;
  font-weight: 600;
  color: #fff;
  margin-left: 50px;
}
#modal div:nth-child(2) {
  height: 200px;
  font-size: 24px;
  font-weight: 400;
  color: #fff;
  margin-left: 50px;
}
#modal .login {
  display: inline-block;
  margin-left: 50px;
  width: 100px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  background-color: rgba(59, 105, 231, 0.6);
  border-radius: 4px;
  color: #fbfbfb;
  font-weight: 500;
}
#modal .login:last-child {
  margin-left: 10px;
  background-color: rgba(248, 249, 250, 0.6);
  color: #141414;
}
#modal .login:hover {
  border-bottom-right-radius: 50px;
  border-top-left-radius: 50px;
  border-bottom-left-radius: 10px;
  border-top-right-radius: 10px;
}

.site-layout-sub-header-background {
  background: #fff;
}

.site-layout-background {
  background: #fff;
}

[data-theme="dark"] .site-layout-sub-header-background {
  background: #141414;
}
</style>
